import React from "react";
import { useState, useEffect } from "react";
import { Card, DatePicker, TreeSelect, Col, Select, Checkbox, Input, Button, Table, Space, Popover, Drawer, Tag } from 'antd';
import { BorderOutlined } from '@ant-design/icons';
import type { TreeSelectProps } from 'antd';
import type { TableColumnsType } from 'antd';
import { useNavigate } from "react-router-dom";
import { useSnapshot } from "valtio";
import { state as state1 } from '@/stores';
import { order } from "@/stores/Order"
export default function ProductList() {
    const store = useSnapshot(state1);
    const orders = useSnapshot(order)
    interface DataType {
        key: React.Key;
        icons: any;
        name: string;
        shopname: string;
        types: string;
        entity: string;
        price: number;
        vipprice: number;
        cost: number;
        takeout: number;
        state: string;
    }
    const [columns]: TableColumnsType<DataType> = useState([
        {
            title: <BorderOutlined></BorderOutlined>,
            dataIndex: 'key',
            key: "1",
            render: (text: any, record: DataType) => {
                <span> <BorderOutlined></BorderOutlined></span>
            }
        },
        {
            title: '所属店铺',
            dataIndex: 'name',
            key: "2"
        },
        {
            title: '商品名称',
            dataIndex: 'shopname',
            key: "3"
        },
        {
            title: '分类',
            dataIndex: 'types',
            key: "4",
            render: (text: any, record: DataType) => {
                console.log(record);

                return <span>{record.types.title}</span>
            }
        },
        {
            title: '单位',
            dataIndex: 'entity',
            key: "5"
        },
        {
            title: '堂食价格',
            dataIndex: 'cost',
            key: "6",
            render: (text: any, record: DataType) => {
                return <span>{record.price.toFixed(2)}</span>
            }
        },
        {
            title: '会员价格',
            dataIndex: 'vipprice',
            key: "6",
            render: (text: any, record: DataType) => {
                return <span>{record.vipprice.toFixed(2)}</span>
            }
        },
        {
            title: '成本价',
            dataIndex: 'price',
            render: (text: any, record: DataType) => {
                return <span>{record.price.toFixed(2)}</span>
            }

        },
        {
            title: '外卖价',
            dataIndex: 'cost',
            render: (text: any, record: DataType) => {
                return <span>{record.cost.toFixed(2)}</span>
            }
        },
        {
            title: '餐盒费',
            dataIndex: 'boxfee',
            render: (text: any, record: DataType) => {
                return <span>{record.boxfee.toFixed(2)}</span>
            }
        },

        {
            title: '状态',
            dataIndex: 'state',
            render: (text: any, record: DataType) => {
                if (record.state) {
                    return <Tag color="green">上架</Tag>
                } else {
                    return <Tag color="red">下架</Tag>
                }

            },
        },
        {
            title: (
                <span>
                    操作
                </span>
            ),
            render: (text: any, record: DataType) => (
                <Space size="middle">
                    <a onClick={() => {
                        nav("/producteidt")
                        order.maxshows(record)
                        store.setCurrentPage({ label: "商品详情" })
                    }}><BorderOutlined></BorderOutlined>编辑</a>
                    <a onClick={() => {
                        order.delone(record._id)
                    }}><BorderOutlined></BorderOutlined>删除</a>
                </Space>
            ),
        }
    ]);
    useEffect(() => {
        orders.getTypes()
        order.getprolist()
        order.initSocket()
        store.getBrand()
        store.getShop()
        store.getPartition()

    }, [])
    const data = orders.data
    const namehandleChange = (value: string) => {
        setname(value)
    };
    const statehandleChange = (value: string) => {
        setstate(value)
    };
    const [shopname, setshopname] = useState<string>('')
    const [state, setstate] = useState<string>('')
    const [name, setname] = useState<string>('')
    const search = () => {
        orders.search(value, shopname, state, name)
        setvalue("")
        setshopname("")
        setstate("")
        setname("")
    }
    const reset = () => {
        setvalue("")
        setshopname("")
        setstate("")
        setname("")
        orders.search("", "", "", "")
    }
    const nav = useNavigate()
    const routerpush = () => {
        nav("/productshow")
        store.setCurrentPage({ label: "商品详情" })
    }
    const [value, setvalue] = useState("")
    const onChange = (newValue: string) => {
        setvalue(newValue);
    };
    const onPopupScroll: TreeSelectProps['onPopupScroll'] = (e) => {
        console.log('onPopupScroll', e);
    };
    const treeData = orders.treedata
    return (
        <div className='w-[100%]'>
            <Card title="订单筛选" className='w-[90%] m-auto min-h-[150px]'>
                <div className="flex">
                    <div className="w-[80%]">
                        <div className="flex w-[100%] min-w-[1200px] ">
                            <div className="flex ml-5">
                                <p>所属店铺：</p> <Select
                                    defaultValue="lucy"
                                    value={name}
                                    placeholder="请选择所属店铺"
                                    style={{ width: 160, marginTop: 10 }}
                                    onChange={namehandleChange}
                                    options={store.shop}
                                />
                            </div>
                            <div className="flex ml-5">
                                <p>商品分类：</p>  <TreeSelect
                                    showSearch
                                    style={{ width: 160, marginTop: 10 }}
                                    value={value}
                                    fieldNames={{ label: 'title', value: '_id', children: 'children' }}
                                    dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                                    placeholder="Please select"
                                    allowClear
                                    treeDefaultExpandAll
                                    onChange={onChange}
                                    treeData={treeData}
                                    onPopupScroll={onPopupScroll}
                                />
                            </div>
                            <div className="flex ml-5">
                                <p>状态：</p> <Select
                                    defaultValue="lucy"
                                    value={state}
                                    style={{ width: 160, marginTop: 10 }}
                                    onChange={statehandleChange}
                                    options={[
                                        { value: '', label: '请选择---' },
                                        { value: 'true', label: '上架' },
                                        { value: 'false', label: '下架' },
                                    ]}
                                />
                            </div>
                            <div className="flex ml-5 mt-3">
                                <Input value={shopname} className="w-[160px] h-[30px]" placeholder="请输入商品名称" onChange={(e) => { setshopname(e.target.value) }}></Input>
                            </div>
                        </div>
                    </div>
                    <div className="w-[20%] flex l justify-center items-center">
                        <Button type="primary" onClick={search} className="ml-5"><BorderOutlined />查询</Button>
                        <Button onClick={reset} className="ml-5">重置</Button>
                    </div>
                </div>
            </Card>
            <Card title="订单筛选" extra={<div>
                <Button className="ml-5" type="primary" onClick={() => {
                    routerpush()
                }}><BorderOutlined />添加商品</Button>
            </div>} className='w-[90%] m-auto mt-10'>
                <Table
                    className="text-center" bordered columns={[...columns]} pagination={{
                        defaultPageSize: 5, // 设置每页默认显示的行数
                        total: data.length,
                        showSizeChanger: true, // 不显示每页显示数量的选择器
                        showQuickJumper: false, // 不显示快速跳转到某一页的输入框
                        pageSizeOptions: ['5', '10', '20'],
                    }} dataSource={data} size="middle" />
            </Card>
        </div>
    )
}
